<template>
    <div class="container">
        <!-- 位置 -->
        <div class="position-x mt20 flex-align">
            <a href="">
                <img src="~/assets/images/home.png" alt="">
            </a>
            <span class="ml10">您的位置：首页</span>
            <span class="ml10">></span>
            <span class="ml10">游戏</span>
            <span class="ml10">></span>
            <span class="cf89 ml10">游戏</span>
        </div>
        <!-- 列表 -->
        <div class="ranking-us mt20">
            <ul>
                <li class="flex" v-for="i in 10" :key="i">
                    <div class="ranking-us-ph">
                        <img class="" src="~/assets/images/ranking/r1.png" alt="">
                    </div>
                    <div class="ranking-us-in flex1">
                        <h3>成语小天才</h3>
                        <div class="ranking-us-ifo flex">
                            <div class="ranking-us-ifo-img">
                                <img class="img100" src="~/assets/images/img2.png" alt="">
                            </div>
                            <div class="flex1 ovn ml20">
                                <div class="ranking-us-con">
                                    <p class="fz16 ellipsis3">
                                        游戏介绍。及下载详情页第一段话内容，直接调用显示，适配页面即可，多出来的隐藏。游戏介绍。及下载详情页第一段话内容，直接调用显示，适配页面即可，多出来的隐藏。
                                    </p>
                                </div>
                                <div class="ranking-us-label mt20">
                                    <span>合集标签</span>
                                    <span>合集标签</span>
                                    <span>合集标签</span>
                                </div>
                                <div class="ranking-us-foot flex-align mt30">
                                    <span class="ranking-us-fbtna flex-center-align fz24 cfff">点击下载</span>
                                    <span class="ranking-us-fbtnb flex-center-align fz24">去游戏盒玩</span>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="ranking-us-img ml30"><img class="img100" src="~/assets/images/img2.png" alt=""></div>
                </li>
            </ul>
        </div>
        <!-- 热门排行榜 -->
        <div class="bgf ovn mt20 pt16">
            <div class="ranking-t">
                <h3 class="fz22">热门排行榜</h3>
            </div>
            <div class="ranking-top">
                <nuxt-link class="ellipsis" v-for="i in 10" :key="i" to="">阿喀琉斯配电间苦力怕萨达</nuxt-link>
            </div>
        </div>
        <!-- 最近更新 -->
        <div class="bgf ovn mt20 pt16">
            <div class="ranking-t flex-align">
                <h3 class="fz22 flex1">最近更新</h3>
                <div class="ranking-tl flex-align">
                    <span class="flex-center-align active">手游</span>
                    <span class="flex-center-align">软件</span>
                    <span class="flex-center-align">H5</span>
                </div>
            </div>
        </div>
        <div class="ranking-list bgf  pt20 pl20 pb10">
            <ul class="flex flex-wrap">
                <li class="flex-align" v-for="item in 10" :key="item">
                    <div class="xcollection-limg imgr100">
                        <img class="img100" src="~/assets/images/img2.png" alt="">
                    </div>
                    <div class="flex1 xcollection-linfo ml10">
                        <h3 class="fz16">王者荣耀</h3>
                        <p class="fz12 mt5">赛程竞速|V 1.2版本</p>
                        <p class="fz12 mt5">中文|700MB</p>
                    </div>
                </li>
            </ul>
        </div>
    </div>
</template>
<script setup>
let pageInfo = useWebsiteStore().getgetMenuInfo('文章');// 调用 store 实例的方法
useSeoMeta({
    title: () => pageInfo.page_title,
    keywords: () => pageInfo.page_keywords,
    description: () => pageInfo.page_description,
})
let navList = ref([
    { id: 0, name: '全部' },
    { id: 1, name: '游戏合集' },
    { id: 2, name: '软件合集' },
    { id: 3, name: 'H5合集' },
])
let navCurrent = ref(0);
let params = reactive({
    id: '',
    page: 1,
    limit: 10,
})
let total = ref(0);
let dataList = ref([]);

//切换页码时变化
const handleCurrentChange = (val) => {
    params.page = val;
    getList();
}
</script>
<style lang="scss" scoped>
.ranking-top {
    padding: 20px 0 10px 20px;

    a {
        display: inline-block;
        margin: 0 6px 0 0;
        width: 160px;
        line-height: 20px;
        font-size: 18px;
    }
}


.ranking-t {
    padding-left: 20px;
    height: 51px;
    line-height: 51px;
    border-left: 4px solid #FF8E2B;
    border-bottom: 2px solid #BBBBBB;
}

/*。ranking-us */
.ranking-us {
    li {
        position: relative;
        overflow: hidden;
        margin-bottom: 10px;
        padding: 16px 20px 16px 0;
        height: 280px;
        background: #FFFFFF;
        border-radius: 10px;

        &:last-child {
            margin-bottom: 0;
        }

        .ranking-us-ph {
            margin-top: -6px;
            padding: 0 0 0 21px;
            width: 76px;

            img {
                width: 40px;
                height: 54px;
            }
        }

        .ranking-us-in {
            h3 {
                padding-top: 15px;
                height: 70px;
                font-size: 24px;
            }

            .ranking-us-ifo {
                .ranking-us-ifo-img {
                    width: 160px;
                    height: 160px;
                    border-radius: 10px;
                    overflow: hidden;
                }
            }

            .ranking-us-con {
                height: 61px;
                line-height: 1.2;
            }

            .ranking-us-label {
                padding-left: 20px;

                span {
                    display: inline-block;
                    margin-right: 16px;
                    font-size: 14px;
                    color: #828282;
                }
            }

            .ranking-us-foot {
                .ranking-us-fbtna {
                    margin-left: 50px;
                    width: 136px;
                    height: 40px;
                    background: #FF8E2B;
                    border-radius: 10px;
                }

                .ranking-us-fbtnb {
                    margin-left: 40px;
                    width: 160px;
                    height: 40px;
                    border-radius: 10px;
                    border: 1px solid #828282;
                }
            }
        }

        .ranking-us-img {
            border-radius: 5px;
            overflow: hidden;
        }
    }
}

/* */
.ranking-tl {
    padding-right: 50px;

    span {
        margin-left: 20px;
        width: 85px;
        height: 26px;
        border-radius: 8px;
        border: 1px solid #D9D9D9;
        font-size: 16px;

        &.ative {
            background: #FF8E2B;
            color: #ffffff;
        }
    }
}

.ranking-list {



    li {
        padding: 15px 0;
        width: 235px;
    }

    .xcollection-limg {}

    .xcollection-linfo {}
}
</style>